<template>
    <div class="fr page">
        <div class="sui-pagination clearfix">
            <ul>
                <li class="prev" :class="{ 'disabled': pageNo === 1 }">
                    <a href="#" @click.prevent="$emit('setPage', pageNo - 1)">«上一页</a>
                </li>
                <li v-if="pageNo > pageData.pageNum + 1">
                    <a href="#" @click.prevent="$emit('setPage', 1)">1</a>
                </li>
                <li v-if="pageNo > pageData.pageNum + 1">
                    <a href="##" @click.prevent>...</a>
                </li>
                <li
                    :class="{ active: item == pageNo }"
                    v-for="item in pageData.maxPage"
                    :key="item"
                    v-show="item >= pageData.miniPage && item <= pageData.maxPage"
                >
                    <a href="#" @click.prevent="$emit('setPage', item)">{{ item }}</a>
                </li>
                <li class="dotted" v-if="pageData.maxPage <= pageSize - 2">
                    <span>...</span>
                </li>
                <li v-if="pageData.maxPage <= pageSize - 1">
                    <a href="###" @click.prevent="$emit('setPage', pageSize)">{{ pageSize }}</a>
                </li>
                <li class="next" :class="{ 'disabled': pageNo === pageSize }">
                    <a href="#" @click.prevent="$emit('setPage', pageNo + 1)">下一页»</a>
                </li>
                <li class="next">
                    <a>共{{ pageSize }}页&nbsp;</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, computed } from 'vue'
export default defineComponent({
    name: 'Pags',
    props: ['pageNo', 'pageSize', 'total', 'pageLang'],
    emits: ["setPage"],
    setup(props) {
        const pageData = computed(() => {
            let miniPage: number = 1, maxPage: number = 1, pageNum: number = Math.floor(props.pageLang / 2)
            if (props.pageNo - pageNum <= 0) {
                miniPage = 1, maxPage = parseInt(props.pageLang)
            } else if (props.pageNo + pageNum >= props.pageSize) {
                miniPage = props.pageSize - props.pageLang + 1
                maxPage = props.pageSize
            } else if (props.pageNo && pageNum) {
                miniPage = props.pageNo - pageNum
                maxPage = props.pageNo + pageNum
            }
            return { miniPage, maxPage, pageNum }
        })
        return {
            pageData
        }
    }
})
</script>
<style scoped lang="less">
.page {
    width: 933px;
    height: 66px;
    overflow: hidden;
    float: left;
    .sui-pagination {
        margin: 18px 0;
        ul {
            margin-left: 300px;
            margin-bottom: 0;
            vertical-align: middle;
            width: 700px;
            float: left;
            li {
                line-height: 18px;
                display: inline-block;
                a {
                    position: relative;
                    float: left;
                    line-height: 18px;
                    text-decoration: none;
                    background-color: #fff;
                    border: 1px solid #e0e9ee;
                    margin-left: -1px;
                    font-size: 14px;
                    padding: 9px 18px;
                    color: #333;
                }
                &.active {
                    a {
                        background-color: #fff;
                        color: #e1251b;
                        border-color: #fff;
                        cursor: default;
                    }
                }
                &.prev {
                    a {
                        background-color: #fafafa;
                    }
                }
                &.disabled {
                    a {
                        color: #999;
                        cursor: default;
                    }
                }
                &.dotted {
                    span {
                        margin-left: -1px;
                        position: relative;
                        float: left;
                        line-height: 18px;
                        text-decoration: none;
                        background-color: #fff;
                        font-size: 14px;
                        border: 0;
                        padding: 9px 18px;
                        color: #333;
                    }
                }
                &.next {
                    a {
                        background-color: #fafafa;
                    }
                }
            }
        }
        div {
            color: #333;
            font-size: 14px;
            float: right;
            width: 241px;
        }
    }
}
</style>